<template>
  <div class="components-group" v-for="(gro, i) in componentsGroupsData" :key="i">
    <div class="group-title">{{ gro.title }}</div>
    <div class="group-main">
      <div
        class="group-item"
        v-for="(comp, j) in gro.components"
        :key="j"
        draggable="true"
        @dragstart="() => fcDesigner.drag.dragstart(comp.key as CompType)"
      >
        <el-icon class="item-icon"><FullScreen /></el-icon>
        <div class="item-text">{{ comp.text }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({ name: 'CompComponentsGroups' })
</script>
<script setup lang="ts">
import { defineComponent } from 'vue'
import { FullScreen } from '@element-plus/icons-vue'
import { useFcDesigner, type CompType } from '../hooks/FcDesigner'

const fcDesigner = useFcDesigner()

const componentsGroupsData = [
  {
    title: '表单组件',
    components: [
      { key: 'input', text: '单行文本', icon: '' },
      { key: 'input-textarea', text: '多行文本', icon: '' },
      { key: 'input-number', text: '数值', icon: '' },
      { key: 'radio', text: '单选', icon: '' },
      { key: 'checkbox', text: '复选', icon: '' },
      { key: 'switch', text: '开关', icon: '' },
      { key: 'rate', text: '评分', icon: '' },
      { key: 'select', text: '下拉单选', icon: '' },
      { key: 'multiple-select', text: '下拉复选', icon: '' },
      { key: 'cascader', text: '级联选择', icon: '' },
      { key: 'date-picker', text: '日期', icon: '' },
      { key: 'date-time-picker', text: '日期区间', icon: '' }
      // { key: 'image-upload', text: '图片上传', icon: '' },
      // { key: 'file-upload', text: '附件', icon: '' }
      // { key: '', text: '成员', icon: '' },
    ]
  },
  {
    title: '其他组件',
    components: []
  }
]
</script>

<style lang="scss" scoped>
@import '../styles.scss';
.components-group {
  font-size: 12px;
  .group-title {
    font-size: 14px;
    font-weight: 600;
    padding: 10px;
  }
  .group-main {
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    .group-item {
      display: flex;
      align-items: center;
      border: 1px solid $base-border-color;
      border-radius: 4px;
      cursor: pointer;
      width: calc(50% - 12px);
      padding: 10px 8px;
      margin: 5px 6px;
      transition: color 0.3s, background-color 0.3s, border-color 0.3s;
      user-select: none;
      // -webkit-user-drag: element;
      &:hover {
        border: 1px solid $base-active-color;
        background-color: $base-active-color;
        .item-icon {
          color: #fff;
        }
        .item-text {
          color: #fff;
        }
      }
      .item-icon {
        color: rgba(0, 0, 0, 0.4);
        margin-right: 6px;
        transition: color 0.1s;
      }
      .item-text {
        color: rgba(0, 0, 0, 0.7);
        transition: color 0.1s;
      }
    }
  }
}
</style>
